import React from "react";
import { useDispatch, useSelector } from "react-redux";

import clsx from "clsx";

import Tooltip from "@material-ui/core/Tooltip";
import Button from "@material-ui/core/Button";

import DehazeIcon from "@material-ui/icons/Dehaze";

import {
  setSidebarToggle,
  setSidebarToggleMobile,
} from "../../../stores/themeSlicer";

import { ReduxStoreTypes } from "../../../stores/rootStore";

const SidebarHeader = () => {
  const themeConfig = useSelector(
    (state: ReduxStoreTypes) => state.themeOptions
  );
  const { sidebarToggleMobile, sidebarToggle } = themeConfig;

  const dispatch = useDispatch();

  const logoImage = require("./../../../assets/images/LeftSidebar/bitbine.svg");

  return (
    <>
      <div className="app-sidebar--header">
        <Tooltip title="Collapse sidebar" placement="right" arrow>
          <Button
            onClick={() => dispatch(setSidebarToggle(!sidebarToggle))}
            className="btn btn-sm collapse-sidebar-btn"
          ></Button>
        </Tooltip>
        <Button
          className={clsx(
            "navbar-toggler hamburger hamburger--elastic toggle-mobile-sidebar-btn",
            { "is-active": sidebarToggleMobile }
          )}
          onClick={() => dispatch(setSidebarToggleMobile(!sidebarToggleMobile))}
        >
          <span className="hamburger-box">
            <span className="hamburger-inner" />
          </span>
        </Button>
        <div className="header-logo">
          <img src={logoImage} alt="LogoName" className="logo-name" />
        </div>
        <Tooltip title="Expand sidebar" placement="right" arrow>
          <Button
            onClick={() => dispatch(setSidebarToggle(!sidebarToggle))}
            className="expand-sidebar-btn btn btn-sm"
          >
            <DehazeIcon />
          </Button>
        </Tooltip>
      </div>
    </>
  );
};

export default SidebarHeader;
